<template>
    <div class="d-flex flex-column align-items-center">
        <!-- 路由占位符 -->
        <div style="width:70%">
            <!-- <el-form :model="houseData.form" ref="account_form" > -->
                <el-form-item label="详细地址: " prop="code">
                    <el-input v-model="houseData.form.address"/>
                </el-form-item>
                <el-form-item label="面积(m²): " prop="area">
                    <el-input v-model="houseData.form.area"/>
                </el-form-item>
                <el-button type="danger" color="#67c23a" style="margin-bottom:10px;" @click="addressIdentify" :loading="addressIdentifyLoading">
                    <span style="color:#ffffff;">{{addressIdentifyBtn}}</span>
                </el-button>
                <el-button 
                    type="danger" 
                    color="#67c23a" 
                    style="margin-bottom:10px;" 
                    @click="houseEstimation" 
                    :loading="houseEstimationLoading"
                    :disabled="houseStatus"
                >
                    <span style="color:#ffffff;">{{houseEstimationBtn}}</span>
                </el-button>
            <!-- </el-form> -->
            <SlotsAddProjectOpt :loading="loading" :loadingText="loadingText">
                <div class="w-100">
                    <!-- 操作区文本框 -->
                    <JsonEditor
                        :json="data.addressIdentify"
                    />
                </div>
            </SlotsAddProjectOpt>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, onMounted } from 'vue'
    import { ElMessage } from 'element-plus'
    import SlotsAddProjectOpt from '/src/components/SlotsAddProjectOpt.vue'
    import JsonEditor from '/src/components/JsonEditor.vue'
    import AddProjectOperateButton from '/src/components/AddProjectOperateButton.vue'
    import { AddressIdentify } from '@/api/common/ai.js'
    import { HouseEstimation } from '@/api/common/dataWarehouse.js'

    const loading = ref(false)
    const loadingText = ref('Lodding...')
    /**
     * 地址识别和估值查询按钮文本和加载状态
     */
    const addressIdentifyBtn = ref('地址识别')
    const houseEstimationBtn = ref('估值查询')
    const addressIdentifyLoading = ref(false)
    const houseEstimationLoading = ref(false)
    const houseStatus = ref(true)

    const data = reactive({
        addressIdentify:{},
    })

    const houseData = reactive({
        form: {
            address: '',
            area:''
        }
    })   

    /**
     * 地址识别
     */
    const addressIdentify = () => {
        if(!houseData.form.address) {
            ElMessage.error('请输入详细地址！')
            return
        }
        addressIdentifyLoading.value = true
        addressIdentifyBtn.value = '识别中...'
        AddressIdentify(houseData.form.address)
            .then((response) => {
                data.addressIdentify = JSON.parse(response.data)
                addressIdentifyLoading.value = false
                addressIdentifyBtn.value = '地址识别'
                // 地址识别后激活住宅估值查询
                houseStatus.value = false
                ElMessage.success('地址识别成功！')
            }).catch(()=>{
                addressIdentifyLoading.value = false
                addressIdentifyBtn.value = '地址识别'
            })
    }

    /**
     * 住宅估值查询
     */
    const houseEstimation = () => {
        if(!houseData.form.address) {
            ElMessage.error('请输入详细地址！')
            return
        }
        if(!houseData.form.area) {
            ElMessage.error('请输入面积！')
            return
        }
        if(Object.keys(data.addressIdentify).length == 0) {
            ElMessage.error('请先进行地址识别！')
            return
        }
        houseEstimationLoading.value = true
        houseEstimationBtn.value = '估值中...'
        HouseEstimation(houseData.form.address, houseData.form.area, JSON.stringify(data.addressIdentify))
            .then((response) => {
                data.addressIdentify = JSON.parse(response.data).房产估值结果[0]
                houseEstimationLoading.value = false
                houseEstimationBtn.value = '估值查询'
                // 住宅估值查询不能重复查询，需要先进行地址识别后才能再次查询
                houseStatus.value = true
                ElMessage.success('估值查询成功！')
            }).catch(()=>{
                houseEstimationLoading.value = false
                houseEstimationBtn.value = '估值查询'
                // 住宅估值查询不能重复查询，需要先进行地址识别后才能再次查询
                houseStatus.value = true
            })
    }

</script>

<style scoped>

</style>